<template>
    <el-dialog
            :visible.sync="isShowPreview"
            append-to-body
            style="text-align: center"
    >
        <div slot="title">{{sourceTitle || title}}</div>
        <!-- 图片 -->
        <template>
            <!-- 单张图片 -->
            <img
                    :src="sources[initialIndex].src"
                    class="ele-gallery-image"
                    v-if="(sliceSingle && sources[initialIndex]) || sources.length === 1"
            >

            <!-- 多张图片 -->
            <el-carousel
                    :initial-index="initialIndex"
                    @change="handleCarouselChange"
                    indicator-position="outside"
                    v-bind="carouselAttrs"
                    v-else
            >
                <el-carousel-item
                        :key="index"
                        v-for="(image, index) in sources"
                >
                    <img
                            :src="image.src"
                            class="ele-gallery-image"
                    >
                </el-carousel-item>
            </el-carousel>
        </template>
    </el-dialog>
</template>

<script>
export default {
    name: 'uploadDialog',
    props: {
        type: String,
        title: String,
        sources: Array,
        sliceSingle: {
            type: Boolean,
            default: false
        },
        carouselAttrs: Object
    },
    data () {
        return {
            sourceTitle: '',
            initialIndex: 0,
            isShowPreview: false
        };
    },
    methods: {
        startPreview (index) {
            this.isShowPreview = true;
            this.initialIndex = index;
            this.sourceTitle = this.sources[index].title;
        },
        handleCarouselChange (index) {
            if (this.sources[index] && this.sources[index].title) {
                this.sourceTitle = this.sources[index].title;
            } else {
                this.sourceTitle = '';
            }
        }
    }
};
</script>

<style scoped>

</style>
